<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    全选： <input type="checkbox" name="" id="allcheck">
    <br>
    <br>
    选项1：<input type="checkbox" name="" class="check1">
    <br>
    选项2：<input type="checkbox" name="" class="check1">
    <br>
    选项3：<input type="checkbox" name="" class="check1">

    <script>
        var allcheck = document.querySelector("#allcheck");
        // 下面获取到的是伪数组
        var check1 = document.getElementsByClassName("check1");
        // 伪数组转数组
        var check = [...check1];
        // console.log(check);

        // 全选：点击全选，让所有选项都勾选上
        allcheck.addEventListener("click", function () {

            check.forEach(function (item, m, check) {
                // console.log(item);

                // if (allcheck.checked) {
                //     item.checked = true;
                // } else {
                //     item.checked = false;
                // }

                // 代码等于
                // checked属性可以获取到选项框的状态，true为选中，false为未选中
                item.checked = allcheck.checked;
            })
        })


        // 反选：选项卡全选时，全选选中；有一个选项卡未选中，则取消全选

        // 反选法一
        // check.forEach(function (item) {
        //     // 点击每一个选项卡时绑定事件
        //     item.addEventListener("click", function () {

        //         // if (check[0].checked && check[1].checked && check[2].checked) {
        //         //     allcheck.checked = true;
        //         // } else {
        //         //     allcheck.checked = false;
        //         // }

        //         // 即简化代码
        //         var flag = true;
        //         check.forEach(function (item2, m) {
        //             // 如果选项卡未选中，
        //             if (!item2.checked) {
        //                 flag = false;
        //             }
        //         })

        //         // if (flag) {
        //         //     allcheck.checked = true;
        //         // } else {

        //         //     allcheck.checked = false;
        //         // }

        //         // 转三目
        //         allcheck.checked = flag ? true : false;

        //         // 简化：因为allchecked.checked其返回值为true或false
        //         allcheck.checked = flag;
        //     })
        // })


        // 反选法二
        // check.forEach(function (item) {
        //     // 点击每一个选项卡时绑定事件
        //     item.addEventListener("click", function () {
        //         var count = 0;
        //         check.forEach(function (item2, m) {
        //             // 如果选项卡选中，则加加
        //             if (item2.checked) {
        //                 count++;
        //             }
        //         })
        //         // 三目：如果循环正常结束，count= 3 ，其等于数组长度，则值为true；反之false
        //         allcheck.checked = (count === check.length) ? true : false;
        //         // 简化：因为allchecked.checked其返回值为true或false
        //         allcheck.checked = (count === check.length)
        //     })
        // })

        // 反选法三
        check.forEach(function (item) {
            // 点击每一个选项卡时绑定事件
            item.addEventListener("click", function () {
                // forEach 不能使用break
                for (var m = 0; m < check.length; m++) {
                    if (!check[m].checked) {
                        break;
                    }
                }
                // 三目：如果循环正常结束，count= 3 ，其等于数组长度，则值为true；反之false
                allcheck.checked = (m === check.length) ? true : false;
                // 简化：因为allchecked.checked其返回值为true或false
                allcheck.checked = (m === check.length)
            })
        })












    </script>
</body>

</html>